#about{
    background-repeat: no-repeat;
    background-position: 50% 50%;
    position:relative;
    background-size: cover;
    z-index: 2;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    ::i-block-chrome, #about {
		background-attachment:initial;
    }
}

.abbg{
	overflow: hidden;
	float: left;
	width: 30%;
	margin-left: 19%;
	padding: 150px 0 100px;
}
#about .about-box{overflow:hidden;position:relative;}
#about #indexyoutube{
    display: block;
    width: 50%;
    float: left;
    background-repeat: no-repeat;
    background-position:  50%;
    background-size: cover;
    left: 0;
    top.: 0;
    top: 0;
    z-index: 54;
}
/**for u2**/
#indexyoutubee{
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}
.UTwo{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;margin-top: 70px;}
.UTwo a{
	display: block;
	width: 75px;
	height: 75px;
	text-align: center;
	line-height: 75px;
	border-radius: 50%;
	/* background: rgba(255, 5, 5, 0.6); */
	position: absolute;
	z-index: 5;
	color: #ffffff;
	font-size: 30px;
	left: calc(50% - 40px);
	top: calc(50% - 40px);
	transition:all linear 0.3s;
	border: 4px solid #fff;
}
.UTwo a:hover{
    /* width: 95px; */
    /* height: 95px; */
    /* line-height: 95px; */
    /* left: calc(50% - 55px); */
    /* top: calc(50% - 55px); */
    /* font-size: 34px; */
    background-color: #b68e5c;
    border: 4px solid #b68e5c;
}
.UTwo iframe ,
.UTwo object ,
.UTwo embed{position:absolute;top:0;left:0;width:100%;height:100%;}
#about-wrap{background-color: rgba(0, 0, 0, 0.8);padding: 70px 100px;}
#about-wrap h2{color:#b49062;font-size: 40px;text-align: center;border-left: 3px solid #b49062;border-right: 3px solid #b49062;padding: 0 20px;width: 50%;margin: 0 auto;line-height: 120%;}
#about-wrap p{font-size: 22px;color:#b49062;text-align: center;font-weight: bold;margin-top: 15px;}
#about-wrap article{
	color:#2a2a2a;
	font-size:18px;
	margin: 30px 50px;
	text-shadow: 0 0 3px #fff, 0 0 3px #fff;
	line-height: 150%;
	font-weight: bold;
}
#about-wrap p .more{
	/* background-image: url(/images/08/index-about-more.png); */
	background-repeat: repeat-x;
	background-position: 50% 50%;
	color: #000;
	display: inline-block;
	text-align: center;
	font-size: 14px;
	padding: 3px 60px;
	background-color: #b48f61;
	border-radius: 50px;
}
#about-wrap p .more i{
    margin-left: 10px;
    font-weight: bold;
}
#fakeNumber{padding: 90px 0;background-image:url(../../images/01/parallax-3.jpg);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;position: relative;height: 680px;}
#fakeNumber .topic h2, #indexyoutube .topic h2, #process .topic h2{
    color: #b49062;
    font-size: 40px;
    text-align: center;
    border-left: 3px solid #b49062;
    border-right: 3px solid #b49062;
    padding: 0 20px;
    width: 15%;
    margin: 0 auto;
    line-height: 120%;
}
#fakeNumber .webframe{
    position: absolute;
    bottom: 90px;
    right: 130px;
    width: 42%;
}
#fakeNumber .webframe h3{
    color: white;
    font-style: italic;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 15px;
    font-family: 'Rubik',sans-serif;
    margin-left: 80px;
}
#fakeNumber .webframe p{
    color: white;
    font-size: 15px;
    line-height: 180%;
    margin-left: 80px;
    margin-right: 65px;
    margin-bottom: 20px;
    text-align: justify;
}
#fakeNumber ul{text-align:center;background-color: #c2995d;transform: skewX(-20deg);margin: 0 35px;}
#fakeNumber ul li{display:inline-block;width: calc(36% - 4px);color:#fff;text-align:center;position:relative;transform: skewX(20deg);}
#fakeNumber ul li:nth-child(2){
    width: calc(27% - 4px);
}
#fakeNumber ul li:after{content:'';width:4px;height:50px;display:block;background: #000000;position:absolute;z-index:5;top:calc(50% - 25px);left:0;transform: skew(-15deg);}
#fakeNumber ul li:first-child:after{display:none}
#fakeNumber ul li .eva{/* background:rgba(255,255,255,0.3); */padding: 25px 0;margin:0 auto;display:inline-block;}
#fakeNumber ul li .eva p{font-size:14px;color:#f4dc20;line-height:100%;text-align: center;margin: 0;}
#fakeNumber ul li .eva p b{font-size: 80px;/* margin-left:5px; */color: #000;line-height:100%;font-family: 'Oswald',sans-serif;font-style: italic;}
#fakeNumber ul li .eva h2{text-align: center;font-size: 15px;margin-top:10px;line-height:120%;color: black;}
.index-title{overflow:hidden}
.index-title h2{float:left;font-family:'Raleway',sans-serif;font-size:50px;line-height:110%}
.index-title p{float:right;font-size:16px}
.index-title p a b{color:#ffe502;margin-left:10px}
.index-title p:hover{background:#ffe502;color:#000}
.index-title p:hover a b,.index-title p:hover a,#product .index-title p:hover a{color:#000}
#product{overflow:hidden;position:relative;padding: 85px 0;}
#product .topic h2{
    color: #b49062;
    font-size: 40px;
    text-align: center;
    border-left: 3px solid #b49062;
    border-right: 3px solid #b49062;
    padding: 0 20px;
    width: 12%;
    margin: 0 auto;
    line-height: 120%;
}
#product .webframe{position:relative;z-index:3}
#product:after{width:100%;height:70%;content:'';display:block;position:absolute;top:0;left:0;z-index:1}
#product .topic .topic-title{color:#fff}
#product .topic b{color:rgba(245,245,245,0.12)}
#prolay{position:relative;z-index:3;margin-top: 40px;}
#prolay .pro-list{
    overflow: hidden;
}
#prolay .pro-list >div{
    float: left;
    width: calc(100%/6);
}
#prolay .slick-list{padding:15px}
#prolay .pro-list .p-border{position:relative;/* padding:30px; *//* background:#fff; *//* border:1px solid #f5f5f5; */transition:all linear .2s;}
#prolay .pro-list h4{color:#ff9637;font-weight:400;font-size:11pt}
#prolay .pro-list .photo{margin:20px 0;background-color:#f9f9f9;background-position:50% 50%;background-repeat:no-repeat;background-size: cover;position: relative;}
#prolay .pro-list .photo img{width:100%}
#prolay .pro-list a{position:absolute;top:0;left:0;width:100%;height:100%;z-index:5}
#prolay .pro-list .p-info b{line-height:130%;font-size: 15pt;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position: absolute;bottom: 20px;left: 20px;color: white;text-shadow: 1px 1px 3px black;}
#prolay .pro-list .p-info >span{background:#ff7166;display:block;width:20px;height:1px;margin:20px 0}
#prolay .pro-list .p-info .describe{line-height:140%;font-size:11pt;overflow:hidden;height:30pt}
#prolay .pro-list .p-info .price{overflow:hidden;margin:10px 0 0;height:22px}
#prolay .pro-list .p-info .price span{float:right;font-size:10pt;color:#565656}
#prolay .pro-list .p-info .price span.old{float:left;text-decoration:line-through}
#prolay .pro-list .p-info h5{margin:0;margin-top:20px}
#prolay .pro-list .p-info h5 b{font-size:11pt;display:inline-block;background:#e8e8e8;padding:6px 35px;border-radius:25px;color:#252525}
#prolay .slick-prev{width:40px;height:40px;left:-50px}
#prolay .slick-next{width:40px;height:40px;right:-50px}
#prolay .slick-prev:before,#prolay .slick-next:before{font-size:40px;color:#3a3f4a}
.same-btn{text-align:center;margin-top:40px}
.same-btn a{display:inline-block;background: #b48e60;color: #000;font-size: 11pt;font-weight: bold;padding: 3px 70px;border-radius:25px;transition:all linear .2s;}
.same-btn a i{
    margin-left: 10px;
}
#prolay .same-btn{margin-top:40px}
#indexyoutube{
    padding: 90px 0;
    background-image: url(../../images/01/index-youtubeBg.jpg);
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: 100%;
}
#indexyoutube .webframe{
    width: 37%;
}
#process{
    padding: 90px 0;
    background-image: url(../../images/01/index-processBg.jpg);
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: cover;
}

.Introduction{
  width: 70%;
  margin: 0 auto;
}

.cols{
  /* display: -webkit-box; */
  display: -ms-flexbox;
  /* display: flex; */
  -ms-flex-wrap: wrap;
  /* flex-wrap: wrap; */
  /* -webkit-box-pack: center; */
  -ms-flex-pack: center;
  /* justify-content: center; */
  margin-top: 50px;
  text-align: center;
}

.col{
  width: calc((100%/4) - 45px);
  margin: 20px 20px;
  cursor: pointer;
  display: inline-block;
}

.container{
  -webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
	-webkit-perspective: 1000px;
	   perspective: 1000px;
}

.front,
.back{
  background-size: cover;
  background-position: center;
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  text-align: center;
  width: 203px;
  min-height: 203px;
  height: auto;
  border-radius: 50%;
  color: #fff;
  font-size: 1.5rem;
}

.back{
  background: #748d4c;

}

.front:after{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	content: '';
	display: block;
	opacity: .6;
	/* background-color: #000; */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	border-radius: 50%;
}
.container:hover .front,
.container:hover .back{
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.back{
    position: absolute;
    top: 0;
    left: 0;
    /* width: 100%; */
}

.inner{
    -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
  transform: translateY(-50%) translateZ(60px) scale(0.94);
    top: 50%;
    position: absolute;
    left: 0;
    width: 100%;
    padding: 2rem;
    -webkit-box-sizing: border-box;
  box-sizing: border-box;
    outline: 1px solid transparent;
    -webkit-perspective: inherit;
  perspective: inherit;
    z-index: 2;
	text-align: center;
}
.inner p{
    font-size: 1.1rem;
    line-height: 170%;
	text-align:center;
}

.container .back{
    -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.container .back .backbg{
	position: absolute;
	width: 100%;
	height: 100%;
}
.container .back .backbg img{width: 100%;height: 100%;object-fit: cover;border-radius: 50%;}
.container .front{
    -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.container:hover .back{
  -webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.container:hover .front{
  -webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.front .inner h2,
.back .inner h3{
  font-size: 28px;
  /* margin-bottom: 2rem; */
  position: relative;
  text-align: center;
  font-weight: bold;
  line-height: 170%;
  text-shadow: 1px 2px 5px black;
}



.front .inner p{
  color: rgba(255,255,255,0.7);
  font-weight: 300;
  font-size: 1.1rem;
  line-height: 170%;
}
#ssbanner{overflow:hidden;background-image:url(../../images/01/bg-image-2.jpg);background-repeat:no-repeat;background-position:100% 0;background-size:cover;position:relative}
#ssbanner .bxslider,#ssbanner #freebox{float:right;width:50%;overflow:hidden}
#ssbanner .bxslider{position:absolute;width:50%;left:0;top:0;height:100%;overflow:hidden}
#ssbanner .bxslider.noneCI{position:relative;float:none}
.bxslider >div{width:50%;height:50%;float:left}
.bxslider >div a{background-repeat:no-repeat;background-position:50% 50%;background-size:40%;background-color:#f8f8f8;display:block;transition:all ease-in-out .3s;width:100%;height:100%}
.bxslider >div:nth-child(2) a,.bxslider >div:nth-child(3) a{background-color:#f0f0f0}
.bxslider >div a:hover{background-size:35%}
#freeboxlist{width:80%;margin:0 auto}
#freeboxlist .free{width:80%;margin:20% auto;color:#fff}
#freeboxlist .free h3{text-align:center;line-height:110%;font-size:30px;margin-bottom:30px;text-shadow:0 5px 5px #030303}
#freeboxlist .free p{font-size:16px;line-height:200%;text-align:center}
#freeboxlist .slick-prev{left:-5%;z-index:4}
#freeboxlist .slick-next{right:-5%}
#freeboxlist .slick-prev:before,#freeboxlist .slick-next:before{font-size:30px}
#NewsBox,#bookBox{padding:50px 0;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
#ssbannerTitle,#NewsTitle,#BookTitle{border-bottom:1px solid #e1e1e1;margin-bottom:20px;padding-bottom:35px}
#ssbannerTitle{margin-top:50px}
#news li{display:inline-block;width:calc(25% - 4px);vertical-align:top}
#news ul li:first-child{width:calc(50% - 4px)}
#news li .border{border:1px solid #e9e9e9;margin:5px}
#news li .photo{position:relative;overflow:hidden}
#news li .photo .hide{position:absolute;top:0;right:-100px;color:#fff;z-index:2;padding-top:10px;padding-right:10px;font-size:18px;opacity:0;transition:all linear .3s}
#news li .photo:hover .hide{opacity:1;right:0}
#news li .photo .hide:after{content:'';background:#ffcb01;display:block;position:absolute;width:140px;height:140px;right:0;top:0;z-index:-1;transform:rotate(45deg) translateY(-100px) translateX(0px) scale(0.7)}
#news li .photo a{display:block;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
#news li .photo a img{width:100%;height:190px}
#news li .news-info{margin:25px 35px 30px}
#news li .news-info h3{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:17px;padding:5px}
#news li .news-info h3 a{display:inline-block;position:relative}
#news li .news-info h3 a:after{content:'';width:100%;position:absolute;background:#ffcb01;height:4px;display:block;top:100%;left:0;opacity:0;transition:all linear .3s}
#news li .news-info h3 a:hover:after{opacity:1}
#news li .news-info .describe{font-size:15px;color:#9d9d9d;display:block;overflow:hidden;height:46px;margin:10px 0}
#news li .news-info .news-bottom p{display:inline-block;max-width:30%;margin-right:3%;color:#606060;font-size:13px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#news li .news-info .news-bottom p a{color:#606060}
#news li .news-info .news-bottom p b{color:#ffcb01;margin-right:5px}
#news li .news-info .news-bottom p a:hover{color:#000}
#book ul{overflow:hidden}
#book ul li{float:left;width:calc((100% / 6) - 20px);margin:0 10px 30px}
#book ul li .photo{background-repeat:no-repeat;background-position:50% 50%;background-size:100%;transition:all ease-in-out .3s}
#book ul li .photo a{display:block;transition:all ease-in-out .3s;width:100%;height:100%;background-repeat:no-repeat;background-position:50% 50%}
#book ul li .photo a img{width:100%}
#book ul li h3{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:15px 0}
#book ul li h3 a{color:#6e6e6e}
#book ul li h3 a i{margin-right:5px}
#book ul li .photo a:hover{background-color:rgba(0,0,0,0.39)}
@media screen and (max-width: 1680px) {
#about-wrap h2 {    width: 65%;}
}
@media screen and (min-width: 1440px) {
#prolay .pro-list .slick-slide:nth-child(4n) .p-box{margin-right:0}
#prolay .pro-list .slick-slide:nth-child(1) .p-box,#prolay .pro-list .slick-slide:nth-child(5) .p-box{margin-left:0}
}
@media screen and (max-width: 1440px) {
#news li{width:calc(33% - 4px)}
#news ul li:first-child{width:calc(66% - 4px)}
#news ul li:nth-child(6),#news ul li:nth-child(7){display:none}
.abbg {    width: 35%;    margin-left: 10%;}
#product .topic h2, #fakeNumber .topic h2, #indexyoutube .topic h2, #process .topic h2 {    width: 20%;}
#fakeNumber .webframe {    width: 60%;}
#indexyoutube {    background-size: cover;}
.Introduction {    width: 90%;}
}
@media screen and (max-width: 1280px) {
#aboutFunc #about .aboutart h2{font-size:30px}
#aboutFunc #about .aboutart{margin:70px auto}
#fakeNumber ul li .eva p b{font-size: 60px;}
#fakeNumber ul li .eva h2{font-size:14px}
#news li,#news ul li:first-child{width:calc(50% - 4px)}
#news li .news-info{margin:15px 20px 20px}
#news li .photo a img{height:auto}
#news li .news-info h3{white-space:initial;text-overflow:inherit;height:66px}
#news ul li:nth-child(6){display:inline-block}
#book ul li{width:calc((100% / 3) - 20px)}
.abbg {    width: 45%;}

}
@media screen and (min-width: 1025px) {
#prolay .pro-list .p-border:hover{transform:translate(-15px,-15px)}
#about {    background-attachment: fixed;}
}
@media screen and (max-width: 1024px) {
#prolay .pro-list >div {width: calc(100%/2);}
#prolay .pro-list .photo {    margin: 0;}
#product .topic h2, #fakeNumber .topic h2, #indexyoutube .topic h2, #process .topic h2 {    width: 30%;}
#fakeNumber .webframe {    width: 70%;    position: unset;    margin: 60px auto 0;}
#fakeNumber {height: auto;}
.Introduction {    width: 100%;}
.front, .back {    width: 170px;    min-height: 170px;}
}
@media screen and (max-width: 980px) {
#aboutFunc #youtube,#aboutFunc #about{width:100%}

#aboutFunc #about .aboutart{width:70%}
#fakeNumber ul li .eva{padding:40px 20px;width:calc(100% - 44px)}
#ssbanner .bxslider{width:100%;position:inherit}
#ssbanner #freebox{width:100%}
.index-title h2{font-size:30px}
}
@media screen and (max-width: 768px) {
#fakeNumber ul li{width: calc(35% - 4px);/* margin-bottom:50px; */}
#fakeNumber ul li:nth-child(3),#fakeNumber ul li:nth-child(4){margin-bottom:0}
#news li .news-info .news-bottom p{display:block;max-width:97%}
#news .webframe{width:90%}
.abbg {    width: 100%;    margin: 0;    padding: 0;}
#about-wrap article {    margin: 30px 100px;}
#about-wrap h2 {    width: 40%;font-size: 30px;}
#fakeNumber ul, #fakeNumber ul li {    transform: skewX(0deg);}
#product .topic h2, #fakeNumber .topic h2, #indexyoutube .topic h2, #process .topic h2 {    width: 40%;    font-size: 30px;}
#fakeNumber .webframe {    width: 90%;}
#fakeNumber .webframe p {    margin-left: 180px;    margin-right: 35px;}
#fakeNumber .webframe h3{margin-left: 180px; }
#indexyoutube .webframe {    width: 60%;}
.col {    width: calc((100%/3) - 45px);}
}
@media screen and (max-width: 480px) {
#aboutFunc #about .aboutart{width:80%}
#aboutFunc #about .aboutart h2{font-size:24px}
#aboutFunc #about .aboutart .more a{padding:10px 50px;font-size:14px}
#aboutFunc #about .aboutart .more{margin-top:60px}
#aboutFunc{margin:50px 0}
#fakeNumber ul li .eva p b{font-size:30px;display:block}
#news li .news-info{margin:5px 10px 10px}
#prolay .pro-list .p-info h3 a{height:36px;white-space:inherit}
#prolay .pro-list .p-info .describe{white-space:inherit;height:40px;line-height:140%}
#prolay .pro-list .p-info{width:100%;transform:translateY(-15px)}
#prolay .pro-list .p-border{/* padding:10px */}
#prolay .pro-list .p-info h4 a{opacity:1;transform:translateY(0)}
#prolay .p-box .bar span{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);height:3px;width:50px}
#book ul li{width:calc((100% / 2) - 20px)}
#about-wrap {    padding: 70px 30px;}
#about-wrap h2 {    width: 45%;}
#about-wrap article {    margin: 30px 50px;}
#product .topic h2, #fakeNumber .topic h2, #indexyoutube .topic h2, #process .topic h2 {    width: 60%;}
#fakeNumber .webframe h3, #fakeNumber .webframe p {    margin-left: 35px;}
#fakeNumber ul li, #fakeNumber ul li:nth-child(2) {    width: calc(100% - 4px);}
#fakeNumber ul li:after{    display: none;}
#fakeNumber ul li .eva {    padding: 15px 20px;}
#indexyoutube {    padding: 50px 0;}
#indexyoutube .webframe {    width: 80%;}
.col {    width: calc((100%/2) - 45px);}
.front, .back {    width: 120px;    min-height: 120px;}
}